<template>
  <BoTable :columns="columns" :request="_list" ref="tableRef" row-key="id">
    <template #expandedRowRender="{ record }">
      <BoTable
        :columns="_columns"
        :request="(params) => _listByEventId(params, record.eewId)"
        ref="tableRef"
        height="auto"
        hideSearch
        hidePagination
      ></BoTable>
    </template>
  </BoTable>
  <!-- 报文 -->
  <FormModal :columns="items">
    <template #details>
      <JsonViewer
        :value="messageData"
        :expand-depth="5"
        style="background: transparent"
        :copyable="{ copyText: '复制', copiedText: '已复制!' }"
        sort
      ></JsonViewer>
    </template>
  </FormModal>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { useFormModal } from '@boeyo/hooks';
import { useDicts } from '@boeyo/portal';
import { BoFormProps, BoTable, BoTableProps } from '@boeyo/ui';
import dayjs from 'dayjs';
import JsonViewer from 'vue-json-viewer';
import { list, listByEventId } from './api';

const messageData = ref({});

const items = computed<BoFormProps['columns']>(() => [
  {
    title: '',
    dataIndex: 'details',
    valueType: 'input',
    formItemProps: {
      wrapperCol: { span: 24 },
    },
  },
]);

const dictArr = ['sys_magnitude', 'sys_event_type', 'sys_warning_level'];
const { sysMagnitudeEnum, sysEventTypeEnum, sysWarningLevelEnum } =
  useDicts(dictArr);

const { FormModal, open } = useFormModal({
  size: 'small',
  column: 1,
});

const _list = async (params) => {
  params.oritimeStart = params.oritime
    ? dayjs(params.oritime[0]).valueOf()
    : null;
  params.oritimeEnd = params.oritime
    ? dayjs(params.oritime[1]).valueOf()
    : null;
  if (!params.oritime) {
    delete params.oritimeStart;
    delete params.oritimeEnd;
  }
  const res: any = await list(params);
  return {
    total: res.total,
    rows: res.rows,
  };
};

const _listByEventId = async (params, eewId) => {
  const res: any = await listByEventId({ eewId });
  return res;
};
const columns = computed<BoTableProps['columns']>(() => [
  {
    title: '事件类型',
    dataIndex: 'msgType',
    hideInSearch: true,
    valueEnum: {
      ...sysEventTypeEnum.value,
    },
  },
  // {
  //   title: '事件ID',
  //   dataIndex: 'code',
  //   hideInSearch: true,
  // },
  {
    title: '生产者',
    dataIndex: 'producer',
    hideInSearch: true,
  },
  {
    title: '震级(M)',
    dataIndex: 'magnitude',
    valueType: 'select',
    valueEnum: {
      ...sysMagnitudeEnum.value,
    },
  },
  {
    title: '经度',
    dataIndex: 'epilon',
    hideInSearch: true,
  },
  {
    title: '纬度',
    dataIndex: 'epilat',
    hideInSearch: true,
  },
  {
    title: '震源深度',
    dataIndex: 'focdepth',
    hideInSearch: true,
  },
  {
    title: '震中地名',
    dataIndex: 'locname',
    ellipsis: true,
  },
  {
    title: '发震时间',
    dataIndex: 'oritime',
    valueType: 'dateRange',
  },
  // {
  //   title: '响应状态',
  //   dataIndex: 'isResponse',
  //   valueType: 'status',
  //   hideInSearch: true,
  //   valueEnum: {
  //     '0': {
  //       text: '未响应',
  //       status: 'error',
  //     },
  //     '1': {
  //       text: '响应',
  //       status: 'success',
  //     },
  //   },
  // },
]);

const _columns = computed<BoTableProps['columns']>(() => [
  {
    title: '发布Id',
    dataIndex: 'eewId',
  },
  {
    title: '发布报数',
    dataIndex: 'serialNumber',
  },
  {
    title: '震级(M)',
    dataIndex: 'magnitude',
  },
  {
    title: '深度(kM)',
    dataIndex: 'focdepth',
  },
  {
    title: '震中烈度(°)',
    dataIndex: 'epiintensity',
  },
  {
    title: '震中预警等级',
    dataIndex: 'warnningLevel',
    valueEnum: {
      ...sysWarningLevelEnum.value,
    },
  },
  {
    title: '发震时间',
    dataIndex: 'oritime',
  },
  {
    title: '发布时间',
    dataIndex: 'sendTime',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    actions: [
      {
        text: '报文',
        onClick(record) {
          messageData.value = JSON.parse(record.message || '{}');

          console.log(messageData.value, 'messageData');

          open({
            title: '报文',
            modalType: 'disabled',
            defaultValue: {
              ...record,
            },
            hideFooter: true,
            request: async (params: any): Promise<any> => {},
          });
        },
      },
    ],
  },
]);
</script>

<style lang="scss" scoped></style>
<route lang="json">
{
  "name": "地震预警查询",
  "meta": { "title": "地震预警查询" }
}
</route>
